<template>
  <!-- 使用传入的 title 属性设置模态框标题 -->
  <a-modal
    :visible="visible"
    :title="title"
    @cancel="handleCancel"
    :footer="null"
    :width="width"
    class="custom-info-modal dark-theme"
  >
    <!-- 信息展示容器 -->
    <div class="info-container">
      <!-- 循环渲染信息项 -->
      <div v-for="(item) in data" :key="item.label" :class="item.full?'info-item2':'info-item'">
        <div v-if="item.title" style="font-weight: 600;font-size: 16px;">{{ item.title }}</div>
        <template v-else>
          <span class="label" v-show="item.label">{{ item.label }}:</span>
          <span class="value" :title="item.value"  v-show="item.value" >{{ item.value || '--'}}</span>
        </template>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import {Modal} from 'ant-design-vue'
// 定义组件接收的属性，新增 title 属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => [],
  },
  width: {
    type: Number,
    default: 600,
  },
  title: {
    type: String,
    default: '信息展示'
  }
});

// 定义组件触发的事件
const emit = defineEmits(['update:visible']);

// 处理模态框关闭事件
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.custom-info-modal .ant-modal-content {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-info-modal .ant-modal-header {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
}

.custom-info-modal .ant-modal-title {
  font-size: 18px;
  font-weight: 500;
}

.info-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
}

.info-item {
  width: calc(50% - 8px); /* 每行展示两项数据 */
  display: flex;
  align-items: center;
}

.info-item2 {
  width: calc(100% - 8px); /* 每行展示两项数据 */
  display: flex;
  align-items: center;
}

.label {
  font-weight: 500;
  color: #666;
  margin-right: 8px;
  white-space: nowrap;
}

.value {
  color: #333;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 暗色主题样式 */
.dark-theme .ant-modal-content {
  background-color: #1f1f1f;
  color: #ffffff;
}

.dark-theme .ant-modal-header {
  background-color: #1a1a1a;
  border-bottom: 1px solid #333333;
}

.dark-theme .ant-modal-title {
  color: #ffffff;
}

.dark-theme .label {
  color: #cccccc;
}

.dark-theme .value {
  color: #ffffff;
}
</style>